<template>
    <div>
        <router-view v-slot="{Component}">
            <keep-alive :include="cachedComponents">
                <component :is="Component" />
            </keep-alive>
        </router-view>
        <div class="footer ">
            <TabBar class="fixed bottom-0" />
        </div>
    </div>
</template>

<script setup>
import { computed } from 'vue';
import TabBar from '../views/layout/TabBar.vue'
import { useRouter } from 'vue-router';

const router = useRouter();

const cachedComponents = computed(() => {
    return router.getRoutes()
        .filter(route => route.meta.cache)
        .map(route => route.name)
})

</script>

